<template>
<view>
	<!-- 导航栏 -->
	<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
		<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
			<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
			<text class="text">持仓数据</text>
			<view class="item" @click="sharefix">
				<text class="li">分享</text>
			</view>
		</view>
	</view>
	<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
	<view class="nav-fix">
		<view class="navbar">
			<view class="li" v-for="(item, index) in navList" :key="index" :class="{'active':navIndex==index}" @click="clicknav(index)">{{item}}</view>
		</view>
		<view v-if="!searchShow && navIndex==0" class="calendar-box">
			<view class="calendar">
				<view class="col-fix" v-for="(date, index) in weekDates" :key="index">
					<view class="col" :class="{'active':date.day == day&&date.month == month&&date.year == year}" @click="check(date.year,date.month,date.day)">
						<text :class="{'f24':date.day==curday}">{{ date.day==curday?'待更新':date.day }}</text> <!-- 渲染日期的日 -->
						<text>{{ date.day==curday?'今日':getWeekday(date.dayOfWeek) }}</text>
					</view>
				</view>
			</view>
			<view class="right">
				<image src="@/static/home/subpage/calendar.png" @click="monthCalendar"></image>
				<image src="@/static/home/subpage/search.png" @click="searchShow=true"></image>
			</view>
		</view>
		<view v-if="!!searchShow" class="search-box">
			<view class="search">
				<view class="left">
					<image src="@/static/home/search.png"></image>
					<input type="text" class="ipt" placeholder-class="pipt" placeholder="请输代码/名称/简称">
				</view>
				<view class="search-btn">搜索</view>
			</view>
			<view class="cancel" @click="searchShow=false">取消</view>
		</view>
	</view>
	<mescroll-uni :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="{use:false}" :height="scrollHeight">
		<view v-if="navIndex==0" class="content">
			<trace></trace>
		</view>
		<view v-if="navIndex==1" class="content">
			<ranking :curdate="curdate" @monthCalendar="monthCalendar" @closemonthCalendar="closemonthCalendar" @chooseContract="chooseContract" @closeContract="closeContract"></ranking>
		</view>
		<view v-if="navIndex==2" class="content">
			<course @chooseContract="chooseContract" @closeContract="closeContract" @chooseFutures="chooseFutures" @closeFutures="closeFutures"></course>
		</view>
		<view v-if="navIndex==3" class="content">
			<variety @chooseFutures="chooseFutures" @closeFutures="closeFutures"></variety>
		</view>
		<view v-if="navIndex==4" class="content">
			<profit @chooseFutures="chooseFutures" @closeFutures="closeFutures"></profit>
		</view>		
	</mescroll-uni>
	<!-- 分享 -->
	<share-fix :isshare="isshare" :animationData="animationData" @closesharefix="closesharefix"></share-fix>
	<!-- 选择日期 -->
	<view class="month-modal" @touchmove.stop.prevent>
		<view class="shade" :hidden="!ismonthCalendar"></view>
		<view class="month-box" :animation="animation1Data">
			<view class="caption">
				<text>清选择日期</text>
				<image @click="closemonthCalendar" src="@/static/home/subpage/close.png"></image>
			</view>
			<view class="z-calendar-box">
				<z-calendar :showYearControl="false" v-model="checkDate" @on-selected="monthcheck"></z-calendar>
			</view>
		</view>	
	</view>
	<!-- 选择合约 -->
	<view class="contract-modal" @touchmove.stop.prevent>
		<view class="shade" :hidden="!iscontract"></view>
		<view class="contract-box" :animation="animation2Data">
			<view class="caption">
				<text>请选择合约</text>
				<image @click="closeContract" src="@/static/home/subpage/close.png"></image>
			</view>
			<scroll-view scroll-y class="contract-fix-box">
				<block v-for="(item,index) in 5">
					<view class="hot-title">
						<view class="left">
							<view class="title-text">持仓量汇总</view>
						</view>
					</view>
					<view class="tab-box">
						<view class="tab" :class="{'active':index==1}" v-for="(item,index) in 5">中国金融交易所</view>
					</view>
				</block>
			</scroll-view>
		</view>	
	</view>
	<!-- 选择期货公司 -->
	<view class="futures-modal" @touchmove.stop.prevent>
		<view class="shade" :hidden="!isfutures"></view>
		<view class="futures-box" :animation="animation3Data">
			<view class="caption">
				<text>请选择期货公司</text>
				<image @click="closeFutures" src="@/static/home/subpage/close.png"></image>
			</view>
			<view class="search-box">
				<view class="search">
					<image src="@/static/home/search.png"></image>
					<input type="text" placeholder="请输入期货公司名称/简称" placeholder-class="pipt" class="ipt">
				</view>
			</view>
			<scroll-view scroll-y class="group-line">
				<block v-for="(item,index) in 3">
					<view class="sup">A</view>
					<view class="fix-box">
						<view class="li">渤海期货</view>
					</view>
					<view class="sup">A</view>
					<view class="fix-box">
						<view class="li" v-for="(item,index) in 10">渤海期货</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import trace from '@/depotInfoPage/trace/trace';
	import ranking from '@/depotInfoPage/ranking/ranking';
	import course from '@/depotInfoPage/course/course';
	import variety from '@/depotInfoPage/variety/variety';
	import profit from '@/depotInfoPage/profit/profit';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			trace,ranking,course,variety,profit
		},
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				navList:['主力追踪','持仓排名','建仓过程','持仓品种','盈亏品种'],
				navIndex:0,
				animationData: {},
				animation1Data: {},
				animation2Data: {},
				animation3Data: {},
				animation:{},
				isshare: false,
				ismonthCalendar: false,
				iscontract: false,
				isfutures: false,
				searchShow:false,
				scrollHeight:'0px',
				weekDates: [], // 存储一周的日期和星期几
				currentDate: new Date(),
				dayOfWeek:new Date().getDay(),
				// year: new Date().getFullYear(),
				// month:new Date().getMonth() + 1,
				curday:new Date().getDate(),
				year:'',month:'',day:'',
				checkDate: new Date(),
				curdate:''
			};
		},
		onLoad(options){
				this.nextCalendar();//获取前5天
				this.curdate = this.afterTime();//获取当前日期
				this.getscrHeight();//获取滚动区域高度
		},
		onReady(){
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				this.animation =animation;
		},
		methods:{
			back(){
				uni.navigateBack();
			},
			clicknav(index){
				this.navIndex = index;
				this.mescroll.triggerDownScroll()
				this.getscrHeight();
			},
			/*下拉刷新的回调 */
			downCallback(page) {
				this.mescroll.resetUpScroll();
				if(this.navIndex === 1) {
					this.getFaFuturesRank()
				}
				// setTimeout(()=>{
				// 	this.mescroll.endSuccess(9,false);// 加载成功
				// },1500)
			},
			// 每日持仓成交排名
			getFaFuturesRank() {
				this.$request({
					url: this.$api.getFaFuturesRank,
					method: 'get',
					successCb: (res) => {
						uni.hideLoading();
						console.log('请求成功', res)
						this.mescroll.endSuccess(9,false)
						// if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						// this.list = this.list.concat(res.rows); //追加新数据
						// this.mescroll.endSuccess(res.rows.length); // 隐藏加载状态栏
					},
					failCb(e) {
						// uni.hideLoading(); 
						this.mescroll.endErr();
						console.log(e);
						uni.showToast({
							title: e.data.msg||'服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			sharefix(){
				this.isshare= true;
				this.animation.translateY(0).step();
				this.animationData = this.animation.export();
			},
			closesharefix(){
				this.isshare= false;
				this.animation.translateY("100%").step();
				this.animationData = this.animation.export();
			},
			monthCalendar(){
				this.ismonthCalendar= true;
				this.animation.translateY(0).step();
				this.animation1Data = this.animation.export();
			},
			closemonthCalendar(){
				this.ismonthCalendar= false;
				this.animation.translateY("100%").step();
				this.animation1Data = this.animation.export();
			},
			chooseContract(){
				this.iscontract =true;
				this.animation.translateY(0).step();
				this.animation2Data = this.animation.export();
			},
			closeContract(){
				this.iscontract= false;
				this.animation.translateY("100%").step();
				this.animation2Data = this.animation.export();
			},
			chooseFutures(){
				this.isfutures =true;
				this.animation.translateY(0).step();
				this.animation3Data = this.animation.export();
			},
			closeFutures(){
				this.isfutures= false;
				this.animation.translateY("100%").step();
				this.animation3Data = this.animation.export();
			},
			getweek(currentDate){
				var weekDate =[];
				// 获取一周的日期只要日和星期几
				for (let i = 0; i < 6; i++) {
					let day = new Date(currentDate);
					day.setDate(currentDate.getDate() + i);
					let dayOfWeek = day.getDay();
					let formattedDate = {
						year: day.getFullYear(),
						month: day.getMonth() + 1,
						day: day.getDate(),
						dayOfWeek: dayOfWeek
					};
					weekDate.push(formattedDate);
					this.weekDates =weekDate;
				}
			},
			getWeekday(dayOfWeek) {
				// 根据数字获取对应的星期几
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				return weekdays[dayOfWeek];
			},
			// 获取前5天日期
			nextCalendar(){
				var nextWeek = new Date();
				var start = this.currentDate.getTime()/1000;
				var end = start - (60*60*24*5);
				nextWeek = new Date(parseInt(end) * 1000);
				this.currentDate =nextWeek;
				this.getweek(nextWeek);
			},
			check(year,month,day){
				this.year =year;
				this.month =month;
				this.day =day;
				this.checkDate = new Date(`${year}-${month}-${day}`);
				console.log(this.year,this.month,this.day);
			},
			monthcheck(){
				var curTime = new Date().getTime()/1000;
				var cheTime = this.checkDate.getTime()/1000;
				// if(cheTime>=curTime) return;
				
				this.year= this.checkDate.getFullYear();
				this.month= this.checkDate.getMonth() + 1;
				this.day= this.checkDate.getDate();
				this.getweek(this.checkDate);
				var m = this.month < 10 ? '0' + this.month : this.month;
				var endDate = this.year + '-' + m + '-' + this.day
				this.curdate = endDate;
				this.closemonthCalendar();
			},
			analyse(){
				uni.navigateTo({
					url: '/pages/homeSubpage/analyse/analyse'
				});
			},
			getscrHeight(){
				var dw = uni.getSystemInfoSync().windowWidth;
				var hw = uni.getSystemInfoSync().windowHeight;
				var scale = dw/750;
				if(this.navIndex==0){
					if(dw>950) this.scrollHeight = hw-(this.CustomBar+116)+'px';
					else this.scrollHeight = hw-(this.CustomBar+(232*scale))+'px';
				}else{
					if(dw>950) this.scrollHeight = hw-(this.CustomBar+49)+'px';
					else this.scrollHeight = hw-(this.CustomBar+(98*scale))+'px';
				}
			},
			// 当前年月日
			afterTime () {
				var date = new Date()
				var seperator1 = '-'
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day= date.getDate();
				if (month >= 1 && month <= 9) {
					month = '0' + month
				}
				var endDate = year + seperator1 + month + seperator1 + day
				return endDate
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F4F5F7;
}
.nav-fix{
	background-color: #fff;
	margin-top:8rpx;
	.navbar{
		height:90rpx;
		white-space: nowrap;
		border-bottom: 2rpx solid #F6F7F9;
		box-sizing: border-box;
		.li{
			display: inline-block;
			vertical-align: top;
			margin-left:48rpx;
			line-height:90rpx;
			font-size: 24rpx;
			color: rgba(0,0,0,0.8);
		}
		.li.active{
			color: #EE5953;
			font-weight: bold;
			position: relative;
		}
		.li.active::after{
			content:'';
			width: 48rpx;
			height: 8rpx;
			background: #EE5953;
			border-radius: 4rpx;
			position: absolute;
			left:50%;bottom:0;
			transform: translateX(-50%);
		}
		.li:first-child{
			margin-left:40rpx;
		}
	}
	.calendar-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 16rpx 0 24rpx;
		.calendar{
			width:544rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-right:22rpx;
			.col-fix{
				height:134rpx;
				display: flex;
				align-items: center;
				color: rgba(0,0,0,0.8);
				.col{
					width: 84rpx;
					height: 84rpx;
					margin:0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					box-sizing: border-box;
					background: #F4F5F7;
					border-radius: 8rpx;
					& text:first-child{
						font-size: 28rpx;
					}
					& text:last-child{
						font-size: 20rpx;
						color: rgba(0,0,0,0.4);
					}
					.f24{
						font-size: 24rpx !important;
					}
				}
				.col.active{
					border: 2rpx solid #EE5953;
					background: #FFF8F8;
					border-radius: 8rpx;
					color: #EE5953;
					& text:last-child{
						color: #EE5953;
					}
				}
			}
		}
		.right{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex:1;
			& image{
				width:64rpx;height:64rpx;
			}
		}
	}
	.search-box{
		padding:24rpx 38rpx 36rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.search{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width:616rpx;
			height: 72rpx;
			background: #F4F5F7;
			border-radius: 36rpx;
			overflow: hidden;
			padding-left:20rpx;
			box-sizing: border-box;
			.left{
				display: flex;
				align-items: center;
				& image{
					width:48rpx;height:48rpx;
					margin-right:8rpx;
				}
				.ipt{
					font-size: 28rpx;
					color: rgba(0,0,0,0.8);
				}
				.pipt{
					color: rgba(0,0,0,0.8);
				}
			}
			.search-btn{
				width: 104rpx;
				height: 72rpx;
				background: #EE5953;
				text-align: center;
				line-height: 72rpx;
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.cancel{
			font-size: 24rpx;
			color: rgba(0,0,0,0.8);
		}
	}
}
.content{
	padding:24rpx 24rpx 24rpx;
}
.month-modal{
	.month-box{
		position: fixed;
		left:0;bottom:0;
		width:100%;
		box-sizing: border-box;
		transform: translateY(100%);
		z-index: 100;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0px 0px;
		overflow: hidden;
		.caption{
			height:114rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			position: relative;
			line-height: 114rpx;
			& image{
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				right:0;bottom:0;
			}
		}
		.z-calendar-box{
			padding:24rpx;
		}
	}
}
.contract-modal{
	.contract-box{
		position: fixed;
		left:0;bottom:0;
		width:100%;
		box-sizing: border-box;
		transform: translateY(100%);
		z-index: 100;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0px 0px;
		overflow: hidden;
		.caption{
			height:114rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			position: relative;
			line-height: 114rpx;
			border-bottom:2rpx solid #F6F7F9;
			box-sizing: border-box;
			& image{
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				right:0;bottom:0;
			}
		}
		.contract-fix-box{
			padding-left:24rpx;
			padding-bottom:24rpx;
			max-height: 80vh;
			overflow-y: auto;
			.hot-title{
				padding-bottom:26rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top:32rpx;
				.left{
					display: flex;
					align-items: center;
					.title-text{
						font-size: 32rpx;
						font-weight: bold;
						color: #000000;
						line-height: 46rpx;
					}
				}
			}
			.hot-title::after{
				content: '';
				position: absolute;
				left:0;bottom:0;
				width: 60rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FF3B30 0%, rgba(255,59,48,0) 100%);
			}
			.tab-box{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.tab{
					width: 218rpx;
					height: 66rpx;
					border-radius: 16rpx;
					border: 2rpx solid #F4F5F7;
					text-align: center;
					line-height: 66rpx;
					font-size: 24rpx;
					color: rgba(0,0,0,0.8);
					margin: 24rpx 24rpx 0 0;
				}
				.tab:nth-child(3n){
					margin-right:0;
				}
				.tab.active{
					color: #EE5953;
					border: 2rpx solid #EE5953;
				}
			}
		}
	}
}
.futures-modal{
	.futures-box{
		position: fixed;
		left:0;bottom:0;
		width:100%;
		box-sizing: border-box;
		transform: translateY(100%);
		z-index: 100;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0px 0px;
		overflow: hidden;
		.caption{
			height:114rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			position: relative;
			line-height: 114rpx;
			border-bottom:2rpx solid #F6F7F9;
			box-sizing: border-box;
			& image{
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				right:0;bottom:0;
			}
		}
		.search-box{
			padding:32rpx 32rpx 24rpx;
			.search{
				display: flex;
				align-items: center;
				height: 66rpx;
				background: #F4F5F7;
				border-radius: 32rpx; 
				padding:0 20rpx;
			}
			& image{
				width:48rpx;height:48rpx;
				margin-right:20rpx;
			}
			.ipt{
				font-size: 24rpx;
				color: rgba(0,0,0,0.8);
				flex:1;
			}
			.pipt{
				color: #8E8E93;
			}
		}
		.group-line{
			background: #F4F5F7;
			max-height: 60vh;
			.sup{
				padding:0 32rpx;
				font-size: 20rpx;
				color: #356FE5;
				line-height: 32rpx;
			}
			.fix-box{
				padding:4rpx 32rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.li{
					font-size: 24rpx;
					color: rgba(0,0,0,0.8);
					line-height: 34rpx;
					width: 35%;
					padding:12rpx 0;
					text-align: left;
				}
				.li:nth-child(3n){
					// text-align: center;
					width: 30%;
				}
				.li.active{
					color: #356FE5;
				}
			}
		}
	}
}
</style>
